முகப்பு சாதன நினைவக ஏபிஐ: நினைவகம் சார்ந்த வலை அனுபவங்களை உருவாக்குதல்

வலை மேம்பாட்டு உலகில், நாம் பெரும்பாலும் உயர் செயல்திறன் கொண்ட இயந்திரங்களில், வேகமான மற்றும் நிலையான நெட்வொர்க்குகளுடன் இணைக்கப்பட்டு உருவாக்குகிறோம் மற்றும் சோதிக்கிறோம். ஆனாலும், நமது பயனர்கள் நம் படைப்புகளை பல்வேறு வகையான சாதனங்கள் மற்றும் சூழ்நிலைகளிலிருந்து அணுகுகிறார்கள். ஒரு டெவலப்பரின் மடிக்கணினியில் குறைபாடின்றி இயங்கும் நேர்த்தியான, அம்சம் நிறைந்த பயன்பாடு, வரையறுக்கப்பட்ட இணைப்பு வசதி கொண்ட ஒரு பகுதியில் உள்ள பட்ஜெட் ஸ்மார்ட்போனில் எரிச்சலூட்டும், மந்தமான அனுபவமாக இருக்கலாம். மேம்பாட்டிற்கும் நிஜ உலக பயன்பாட்டிற்கும் இடையிலான இந்த இடைவெளி, உண்மையான உலகளாவிய மற்றும் அனைத்தையும் உள்ளடக்கிய வலை அனுபவங்களை உருவாக்குவதில் உள்ள மிக முக்கியமான சவால்களில் ஒன்றாகும்.

இந்த இடைவெளியை நாம் எப்படி சரிசெய்வது? அதை ஆதரிக்கக்கூடியவர்களுக்கு ஒரு செழுமையான அனுபவத்தை வழங்கும் அதே வேளையில், குறைந்த சக்திவாய்ந்த வன்பொருள் உள்ளவர்களுக்கு வேகமான, செயல்பாட்டுடன் கூடிய மற்றும் நம்பகமான அனுபவத்தை எவ்வாறு உறுதி செய்வது? பதில், ஏற்புத்திறன் கொண்ட பயன்பாடுகளை உருவாக்குவதில் உள்ளது. அனைவருக்கும் பொருந்தும் ஒரே அளவு என்ற அணுகுமுறைக்குப் பதிலாக, பயனரின் சாதனத்தின் திறன்களுக்கு ஏற்ப பயனர் அனுபவத்தை நாம் வடிவமைக்க வேண்டும். மிக முக்கியமான, ஆனால் பெரும்பாலும் கவனிக்கப்படாத சாதனக் கட்டுப்பாடுகளில் ஒன்று நினைவகம் (RAM) ஆகும். இங்குதான் சாதன நினைவக ஏபிஐ (Device Memory API) முக்கியப் பங்கு வகிக்கிறது, இது முகப்பு டெவலப்பர்கள் தங்கள் பயன்பாடுகளை நினைவகம் சார்ந்ததாக மாற்றுவதற்கான ஒரு எளிய மற்றும் சக்திவாய்ந்த வழிமுறையை வழங்குகிறது.

சாதன நினைவக ஏபிஐ என்றால் என்ன?

சாதன நினைவக ஏபிஐ என்பது ஒரு பயனரின் சாதனத்தில் உள்ள ரேம் (RAM) அளவைப் பற்றிய ஒரு குறிப்பை வழங்கும் வலைத் தரநிலையாகும். இது `navigator` ஆப்ஜெக்ட்டில் உள்ள ஒரே ஒரு படிக்கமட்டும் கூடிய ப்ராப்பர்ட்டி மூலம் வெளிப்படும் ஒரு குறிப்பிடத்தக்க எளிய ஏபிஐ ஆகும்:

`navigator.deviceMemory`

நீங்கள் இந்த ப்ராப்பர்ட்டியை அணுகும்போது, இது சாதனத்தின் ரேமின் தோராயமான மதிப்பை ஜிகாபைட்களில் வழங்கும். உதாரணமாக, உங்கள் உலாவியின் கன்சோலில் ஒரு எளிய சோதனை இப்படி இருக்கலாம்:

`console.log(navigator.deviceMemory);` // சாத்தியமான வெளியீடு: 8

திரும்பப் பெறப்பட்ட மதிப்புகள் மற்றும் தனியுரிமையைப் புரிந்துகொள்ளுதல்

இந்த ஏபிஐ 7.89 ஜிபி போன்ற துல்லியமான எண்ணைத் தராமல் இருப்பதை நீங்கள் கவனிக்கலாம். அதற்கு பதிலாக, இது ஒரு முழுமையாக்கப்பட்ட மதிப்பை, குறிப்பாக இரண்டின் அடுக்காக (power of two) வழங்குகிறது. இந்த விவரக்குறிப்பு 0.25, 0.5, 1, 2, 4, 8 போன்ற மதிப்புகளைப் பரிந்துரைக்கிறது. இது தனியுரிமைக்காக வேண்டுமென்றே செய்யப்பட்ட ஒரு வடிவமைப்புத் தேர்வாகும்.

ஏபிஐ சரியான ரேம் அளவை வழங்கியிருந்தால், அது உலாவி "கைரேகை" (fingerprinting) முறைக்கு மற்றொரு தரவுப் புள்ளியாக மாறக்கூடும் - இது பல சிறிய தகவல்களை இணைத்து ஒரு பயனருக்கான தனித்துவமான அடையாளங்காட்டியை உருவாக்கும் நடைமுறையாகும், இது கண்காணிப்புக்கு பயன்படுத்தப்படலாம். மதிப்புகளைத் தொகுப்பதன் மூலம், இந்த ஏபிஐ பயனர் தனியுரிமைக்கு ஆபத்தை அதிகரிக்காமல், செயல்திறன் மேம்படுத்தலுக்குப் பயன்படும் அளவுக்குத் தகவலை வழங்குகிறது. இது ஒரு உன்னதமான சமரசம்: அதிகப்படியான குறிப்பிட்ட வன்பொருள் விவரங்களை வெளிப்படுத்தாமல் ஒரு பயனுள்ள குறிப்பை வழங்குதல்.

உலாவி ஆதரவு

இந்தக் கட்டுரையை எழுதும் நேரத்தில், சாதன நினைவக ஏபிஐ கூகிள் குரோம், மைக்ரோசாப்ட் எட்ஜ் மற்றும் ஓபரா உள்ளிட்ட குரோமியம் அடிப்படையிலான உலாவிகளில் ஆதரிக்கப்படுகிறது. இது உலகளாவிய வலை பார்வையாளர்களில் கணிசமான பகுதியைச் சென்றடைய ஒரு மதிப்புமிக்க கருவியாகும். சமீபத்திய ஆதரவுத் தகவல்களுக்கு "Can I Use" போன்ற ஆதாரங்களைச் சரிபார்ப்பது மற்றும் ஏபிஐ இருப்பதை ஒரு படிப்படியான மேம்பாடாகக் கருதுவது எப்போதும் சிறந்தது. `navigator.deviceMemory` வரையறுக்கப்படவில்லை என்றால், நீங்கள் ஒரு இயல்புநிலை அனுபவத்திற்கு சீராக மாற வேண்டும்.

முகப்பு செயல்திறனுக்கு சாதன நினைவகம் ஏன் ஒரு திருப்புமுனையாக இருக்கிறது?

பல தசாப்தங்களாக, முகப்பு செயல்திறன் விவாதங்கள் நெட்வொர்க் வேகம் மற்றும் சிபியு செயலாக்கத்தை மையமாகக் கொண்டிருந்தன. நாம் சொத்துக்களைச் சுருக்குகிறோம், குறியீட்டைக் குறைக்கிறோம், மற்றும் ரெண்டரிங் பாதைகளை மேம்படுத்துகிறோம். இவை அனைத்தும் மிகவும் முக்கியமானவை என்றாலும், நினைவகம் ஒரு அமைதியான தடையாக உருவெடுத்துள்ளது, குறிப்பாக இப்போது உலகளவில் வலைப் போக்குவரத்தில் ஆதிக்கம் செலுத்தும் மொபைல் சாதனங்களில்.

நவீன வலைத்தளங்களில் நினைவகத் தடை

நவீன வலைப் பயன்பாடுகள் நினைவகத்தை அதிகம் பயன்படுத்துகின்றன. அவற்றில் அடங்குவன:

• பெரிய ஜாவாஸ்கிரிப்ட் பண்டில்கள்: கட்டமைப்புகள், நூலகங்கள், மற்றும் பயன்பாட்டுக் குறியீடுகள் பாகுபடுத்தப்பட்டு, தொகுக்கப்பட்டு, நினைவகத்தில் வைக்கப்பட வேண்டும்.
• உயர்-தெளிவுத்திறன் படங்கள் மற்றும் வீடியோக்கள்: இந்தச் சொத்துக்கள் குறிப்பிடத்தக்க நினைவகத்தை உட்கொள்கின்றன, குறிப்பாக அவை குறிவிலக்கப்பட்டு ரெண்டர் செய்யப்படும்போது.
• சிக்கலான DOM கட்டமைப்புகள்: ஒரு ஒற்றைப் பக்க பயன்பாட்டில் (SPA) ஆயிரக்கணக்கான DOM நோடுகள் ஒரு பெரிய நினைவகத் தடத்தை உருவாக்குகின்றன.
• சிஎஸ்எஸ் அனிமேஷன்கள் மற்றும் WebGL: செழுமையான காட்சி விளைவுகள் ஜிபியு மற்றும் சிஸ்டம் ரேம் இரண்டிலும் மிகவும் தேவைப்படுபவையாக இருக்கலாம்.

8ஜிபி அல்லது 16ஜிபி ரேம் கொண்ட சாதனத்தில், இது அரிதாகவே ஒரு பிரச்சனையாக இருக்கும். ஆனால் உலகின் பல பகுதிகளில் பொதுவான, வெறும் 1ஜிபி அல்லது 2ஜிபி ரேம் கொண்ட ஒரு குறைந்த திறன் ஸ்மார்ட்போனில், இது கடுமையான செயல்திறன் சிதைவுக்கு வழிவகுக்கும். உலாவி எல்லாவற்றையும் நினைவகத்தில் வைத்திருக்க சிரமப்படலாம், இது சீரற்ற அனிமேஷன்கள், மெதுவான மறுமொழி நேரங்கள், மற்றும் டேப் செயலிழப்புகளுக்கு வழிவகுக்கும். இது கோர் வெப் வைட்டல்ஸ் (Core Web Vitals) போன்ற முக்கிய செயல்திறன் அளவீடுகளை நேரடியாக பாதிக்கிறது, குறிப்பாக இன்டராக்ஷன் டு நெக்ஸ்ட் பெயிண்ட் (INP), ஏனெனில் முக்கிய த்ரெட் பயனர் உள்ளீட்டிற்கு பதிலளிக்க மிகவும் பிஸியாக இருக்கும்.

உலகளாவிய டிஜிட்டல் பிளவைக் குறைத்தல்

சாதன நினைவகத்தைக் கருத்தில் கொள்வது உங்கள் உலகளாவிய பயனர் தளத்திற்கான பச்சாதாபத்தின் ஒரு செயல். மில்லியன் கணக்கான பயனர்களுக்கு, குறைந்த விலை ஆண்ட்ராய்டு சாதனம் இணையத்திற்கான அவர்களின் முதன்மையான, ஒருவேளை ஒரே நுழைவாயிலாக உள்ளது. உங்கள் தளம் அவர்களின் உலாவியை செயலிழக்கச் செய்தால், நீங்கள் ஒரு அமர்வை மட்டும் இழக்கவில்லை; நீங்கள் ஒரு பயனரை என்றென்றைக்குமாக இழந்திருக்கலாம். நினைவகம் சார்ந்த பயன்பாடுகளை உருவாக்குவதன் மூலம், உங்கள் சேவை உயர்நிலை வன்பொருள் உள்ளவர்களுக்கு மட்டுமல்ல, அனைவருக்கும் அணுகக்கூடியதாகவும் பயன்படுத்தக்கூடியதாகவும் இருப்பதை நீங்கள் உறுதி செய்கிறீர்கள். இது நல்ல நெறிமுறைகள் மட்டுமல்ல; இது ஒரு நல்ல வணிகம், உங்கள் பயன்பாட்டை ஒரு பரந்த சாத்தியமான சந்தைக்குத் திறக்கிறது.

நடைமுறை பயன்பாட்டு வழக்குகள் மற்றும் செயல்படுத்தும் உத்திகள்

சாதனத்தின் நினைவகத்தை அறிவது ஒரு விஷயம்; அதற்கேற்ப செயல்படுவது மற்றொரு விஷயம். உங்கள் பயன்பாடுகளை நினைவகம் சார்ந்ததாக மாற்றுவதற்கான பல நடைமுறை உத்திகள் இங்கே உள்ளன. ஒவ்வொரு எடுத்துக்காட்டுக்கும், ஒரு எளிய வகைப்படுத்தலை நாம் கருத்தில் கொள்வோம்:

`const memory = navigator.deviceMemory;`
`const isLowMemory = memory && memory < 2;` // இந்த எடுத்துக்காட்டுகளுக்கு 2ஜிபி-க்கும் குறைவாக இருப்பதை "குறைந்த நினைவகம்" என வரையறுப்போம்.

1. ஏற்புத்திறன் கொண்ட படங்களை ஏற்றுதல்

சிக்கல்: அனைத்துப் பயனர்களுக்கும் பெரிய, உயர்-தெளிவுத்திறன் ஹீரோ படங்களை வழங்குவது அலைவரிசையை வீணாக்குகிறது மற்றும் அவற்றை முழுத் தரத்தில் காட்ட முடியாத சாதனங்களில் பெரும் அளவு நினைவகத்தை உட்கொள்கிறது.

தீர்வு: பொருத்தமான அளவு படங்களை வழங்க சாதன நினைவக ஏபிஐ-யைப் பயன்படுத்தவும். `` உறுப்பு கலை இயக்கம் மற்றும் வியூபோர்ட்டின் அடிப்படையில் தெளிவுத்திறனை மாற்றுவதற்கு சிறந்தது என்றாலும், நினைவகம் நாம் கருத்தில் கொள்ள வேண்டிய மற்றொரு பரிமாணத்தை அளிக்கிறது.

செயல்படுத்தல்:

படத்தின் மூலத்தை மாறும் வகையில் அமைக்க நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம். உங்களிடம் ஒரு ஹீரோ படக் கூறு இருப்பதாக வைத்துக்கொள்வோம்.

function getHeroImageUrl() {
  const base_path = '/images/hero';
  const isLowMemory = navigator.deviceMemory && navigator.deviceMemory < 2;

  if (isLowMemory) {
    return `${base_path}-low-res.jpg`; // சிறிய, அதிக சுருக்கப்பட்ட JPEG
  } else {
    return `${base_path}-high-res.webp`; // பெரிய, உயர்-தர WebP
  }
}

document.getElementById('hero-image').src = getHeroImageUrl();

இந்த எளிய சரிபார்ப்பு, குறைந்த நினைவக சாதனங்களில் உள்ள பயனர்கள் விரைவாக ஏற்றப்படும் மற்றும் அவர்களின் உலாவியை செயலிழக்கச் செய்யாத, பார்வைக்கு ஏற்றுக்கொள்ளக்கூடிய படத்தைப் பெறுவதை உறுதி செய்கிறது, அதே நேரத்தில் சக்திவாய்ந்த சாதனங்களில் உள்ள பயனர்கள் முழு-தர அனுபவத்தைப் பெறுகிறார்கள்.

2. கனமான ஜாவாஸ்கிரிப்ட் நூலகங்களை நிபந்தனையுடன் ஏற்றுதல்

சிக்கல்: உங்கள் பயன்பாட்டில் ஒரு ஆடம்பரமான, ஊடாடும் 3டி தயாரிப்பு வியூவர் அல்லது ஒரு சிக்கலான தரவு காட்சிப்படுத்தல் நூலகம் உள்ளது. இவை சிறந்த அம்சங்கள், ஆனால் அவை அத்தியாவசியமற்றவை மற்றும் நூற்றுக்கணக்கான கிலோபைட்கள் (அல்லது மெகாபைட்கள்) நினைவகத்தை உட்கொள்கின்றன.

தீர்வு: இந்த கனமான, முக்கியமற்ற மாட்யூல்களை, சாதனம் அவற்றை வசதியாகக் கையாள போதுமான நினைவகத்தைக் கொண்டிருந்தால் மட்டுமே ஏற்றவும்.

டைனமிக் `import()` உடன் செயல்படுத்தல்:

async function initializeProductViewer() {
  const viewerElement = document.getElementById('product-viewer');
  if (!viewerElement) return;

  const hasEnoughMemory = navigator.deviceMemory && navigator.deviceMemory >= 4;

  if (hasEnoughMemory) {
    try {
      const { ProductViewer } = await import('./libs/heavy-3d-viewer.js');
      const viewer = new ProductViewer(viewerElement);
      viewer.render();
    } catch (error) {
      console.error('3டி வியூவரை ஏற்றுவதில் தோல்வி:', error);
      // ஒரு மாற்று நிலையான படத்தைக் காட்டு
      viewerElement.innerHTML = '<img src="/images/product-fallback.jpg" alt="தயாரிப்பு படம்">';
    }
  } else {
    // குறைந்த நினைவக சாதனங்களில், ஆரம்பத்தில் இருந்தே ஒரு நிலையான படத்தைக் காட்டுங்கள்.
    console.log('குறைந்த நினைவகம் கண்டறியப்பட்டது. 3டி வியூவர் தவிர்க்கப்படுகிறது.');
    viewerElement.innerHTML = '<img src="/images/product-fallback.jpg" alt="தயாரிப்பு படம்">';
  }
}

initializeProductViewer();

இந்த படிப்படியான மேம்பாட்டு முறை இரு தரப்பினருக்கும் வெற்றியாகும். உயர்நிலை பயனர்கள் செழுமையான அம்சத்தைப் பெறுகிறார்கள், அதே நேரத்தில் குறைந்த திறன் கொண்ட பயனர்கள் கனமான பதிவிறக்கம் மற்றும் நினைவகச் சுமை இல்லாமல் வேகமான, செயல்பாட்டுடன் கூடிய பக்கத்தைப் பெறுகிறார்கள்.

3. அனிமேஷன் மற்றும் விளைவுகளின் சிக்கலான தன்மையை சரிசெய்தல்

சிக்கல்: சிக்கலான சிஎஸ்எஸ் அனிமேஷன்கள், துகள் விளைவுகள் மற்றும் ஒளிபுகும் லேயர்கள் அற்புதமாகத் தோன்றலாம், ஆனால் அவை உலாவிக்கு பல கம்போசிட்டர் லேயர்களை உருவாக்கத் தேவைப்படுகின்றன, இது அதிக நினைவகத்தை உட்கொள்கிறது. குறைந்த திறன் கொண்ட சாதனங்களில், இது திணறல் மற்றும் ஜங்கிற்கு வழிவகுக்கிறது.

தீர்வு: அத்தியாவசியமற்ற அனிமேஷன்களைக் குறைக்க அல்லது முடக்க சாதன நினைவக ஏபிஐ-யைப் பயன்படுத்தவும்.

ஒரு சிஎஸ்எஸ் கிளாஸுடன் செயல்படுத்தல்:

முதலில், நினைவகச் சரிபார்ப்பின் அடிப்படையில் `` அல்லது `` உறுப்புக்கு ஒரு கிளாஸைச் சேர்க்கவும்.

// உங்கள் பக்க ஏற்றத்தின் ஆரம்பத்தில் இந்த ஸ்கிரிப்டை இயக்கவும்
if (navigator.deviceMemory && navigator.deviceMemory < 1) {
  document.documentElement.classList.add('low-memory');
}

இப்போது, உங்கள் CSS-ல் இந்த வகுப்பைப் பயன்படுத்தி, அனிமேஷன்களைத் தேர்ந்தெடுத்து முடக்கலாம் அல்லது எளிமைப்படுத்தலாம்:

/* இயல்புநிலை, அழகான அனிமேஷன் */
.animated-card {
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease;
}

.animated-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* குறைந்த நினைவக சாதனங்களுக்கான எளிமையான பதிப்பு */
.low-memory .animated-card:hover {
  transform: translateY(-2px); /* மிகவும் எளிமையான மாற்றம் */
  box-shadow: none; /* விலை உயர்ந்த பாக்ஸ்-ஷேடோவை முடக்கு */
}

/* அல்லது மற்ற கனமான விளைவுகளை முழுமையாக முடக்கு */
.low-memory .particle-background {
  display: none;
}

4. ஒரு பயன்பாட்டின் "லைட்" பதிப்பை வழங்குதல்

சிக்கல்: சில சிக்கலான ஒற்றைப் பக்க பயன்பாடுகளுக்கு, சிறிய மாற்றங்கள் போதுமானதாக இல்லை. அதன் உள்ளக நினைவகத் தரவுக் களஞ்சியங்கள், மெய்நிகர் DOM, மற்றும் விரிவான கூறு மரம் கொண்ட அதன் மையக் கட்டமைப்பே குறைந்த திறன் கொண்ட சாதனங்களுக்கு மிகவும் கனமானது.

தீர்வு: பேஸ்புக் மற்றும் கூகிள் போன்ற நிறுவனங்களிடமிருந்து உத்வேகம் பெறுங்கள், அவை தங்கள் பயன்பாடுகளின் "லைட்" பதிப்புகளை வழங்குகின்றன. உங்கள் பயன்பாட்டின் அடிப்படையில் எளிமையான பதிப்பை வழங்க, சாதன நினைவக ஏபிஐ-யை ஒரு சிக்னலாகப் பயன்படுத்தலாம்.

செயல்படுத்தல்:

இது உங்கள் பயன்பாட்டின் பூட்ஸ்டிராப் செயல்முறையின் ஆரம்பத்திலேயே ஒரு சரிபார்ப்பாக இருக்கலாம். இது உங்கள் பயன்பாட்டின் இரண்டு தனித்தனி பில்டுகளைக் கொண்டிருக்க வேண்டிய ஒரு மேம்பட்ட நுட்பமாகும்.

const MEMORY_THRESHOLD_FOR_LITE_APP = 1; // 1 ஜிபி

function bootstrapApp() {
  const isLowMemory = navigator.deviceMemory && navigator.deviceMemory < MEMORY_THRESHOLD_FOR_LITE_APP;
  
  if (isLowMemory && window.location.pathname !== '/lite/') {
    // லைட் பதிப்பிற்குத் திருப்பிவிடு
    window.location.href = '/lite/';
  } else {
    // முழுப் பயன்பாட்டையும் ஏற்று
    import('./main-app.js');
  }
}

bootstrapApp();

"லைட்" பதிப்பு என்பது ஒரு சர்வர்-ரெண்டர் செய்யப்பட்ட பயன்பாடாக இருக்கலாம், இது குறைந்தபட்ச கிளையன்ட்-பக்க ஜாவாஸ்கிரிப்டுடன், முற்றிலும் முக்கிய செயல்பாடுகளில் கவனம் செலுத்துகிறது.

`if` கூற்றுகளுக்கு அப்பால்: ஒரு ஒருங்கிணைந்த செயல்திறன் சுயவிவரத்தை உருவாக்குதல்

ஒரே ஒரு சிக்னலை நம்பியிருப்பது ஆபத்தானது. ஒரு சாதனத்தில் அதிக ரேம் இருக்கலாம், ஆனால் அது மிகவும் மெதுவான நெட்வொர்க்கில் இருக்கலாம். சாதன நினைவக ஏபிஐ-யை நெட்வொர்க் தகவல் ஏபிஐ (`navigator.connection`) மற்றும் சிபியு கோர் எண்ணிக்கை (`navigator.hardwareConcurrency`) போன்ற பிற ஏற்புத்திறன் சிக்னல்களுடன் இணைப்பது ஒரு வலுவான அணுகுமுறையாகும்.

உங்கள் பயன்பாடு முழுவதும் முடிவுகளை வழிநடத்தும் ஒரு ஒருங்கிணைந்த உள்ளமைவுப் பொருளை நீங்கள் உருவாக்கலாம்.

function getPerformanceProfile() {
  const profile = {
    memory: 'high',
    network: 'fast',
    cpu: 'multi-core',
    saveData: false,
  };

  // நினைவகத்தைச் சரிபார்
  if (navigator.deviceMemory) {
    if (navigator.deviceMemory < 2) profile.memory = 'low';
    else if (navigator.deviceMemory < 4) profile.memory = 'medium';
  }

  // நெட்வொர்க்கைச் சரிபார்
  if (navigator.connection) {
    profile.saveData = navigator.connection.saveData;
    switch (navigator.connection.effectiveType) {
      case 'slow-2g':
      case '2g':
        profile.network = 'slow';
        break;
      case '3g':
        profile.network = 'medium';
        break;
    }
  }

  // சிபியு-வைச் சரிபார்
  if (navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4) {
    profile.cpu = 'single-core';
  }
  
  return profile;
}

const performanceProfile = getPerformanceProfile();

// இப்போது, நீங்கள் மேலும் நுட்பமான முடிவுகளை எடுக்கலாம்
if (performanceProfile.memory === 'low' || performanceProfile.network === 'slow') {
  // குறைந்த-தர படங்களை ஏற்று
}

if (performanceProfile.cpu === 'single-core' && performanceProfile.memory === 'low') {
  // அனைத்து அத்தியாவசியமற்ற அனிமேஷன்கள் மற்றும் ஜேஎஸ்-ஐ முடக்கு
}

வரம்புகள், சிறந்த நடைமுறைகள் மற்றும் சர்வர்-பக்க ஒருங்கிணைப்பு

சக்திவாய்ந்ததாக இருந்தாலும், சாதன நினைவக ஏபிஐ-யை கவனமாகப் பயன்படுத்த வேண்டும்.

1. இது ஒரு குறிப்பு, உத்தரவாதம் அல்ல

இந்த மதிப்பு மொத்த கணினி ரேமின் தோராயமான அளவே தவிர, தற்போது கிடைக்கும் இலவச ரேமின் அளவு அல்ல. அதிக நினைவகம் கொண்ட ஒரு சாதனம் பல பிற பயன்பாடுகளை இயக்கிக் கொண்டிருக்கலாம், இது உங்கள் வலைப் பக்கத்திற்கு குறைந்த நினைவகத்தை மட்டுமே விட்டுச்செல்லும். எப்போதும் படிப்படியான மேம்பாடு அல்லது சீரான υποβάθμισηக்காக ஏபிஐ-யைப் பயன்படுத்தவும், ஒரு குறிப்பிட்ட அளவு நினைவகம் இலவசம் என்று கருதும் முக்கியமான தர்க்கத்திற்காக அல்ல.

2. சர்வர்-பக்க கிளையன்ட் ஹிண்ட்ஸின் சக்தி

இந்த முடிவுகளை கிளையன்ட் பக்கத்தில் எடுப்பது நல்லது, ஆனால் நீங்கள் மாற்றியமைப்பதற்கு முன் பயனர் ஏற்கனவே ஆரம்ப HTML, CSS, மற்றும் JS-ஐப் பதிவிறக்கிவிட்டார் என்று அர்த்தம். உண்மையான மேம்படுத்தப்பட்ட முதல் ஏற்றத்திற்கு, நீங்கள் கிளையன்ட் ஹிண்ட்ஸ் (Client Hints)-ஐப் பயன்படுத்தலாம். இது உலாவிக்கு உங்கள் சர்வருக்கு முதல் HTTP கோரிக்கையுடன் சாதனத் திறன் தகவலை அனுப்ப அனுமதிக்கிறது.

இது எப்படி வேலை செய்கிறது என்பது இங்கே:

1. உங்கள் சர்வர் அதன் பதிலில் ஒரு `Accept-CH` ஹெடரை அனுப்புகிறது, இது `Device-Memory` குறிப்பில் ஆர்வமாக உள்ளது என்று உலாவிக்குத் தெரிவிக்கிறது.
2. எடுத்துக்காட்டு ஹெடர்: `Accept-CH: Device-Memory, Viewport-Width, DPR`
3. அந்த உலாவியிலிருந்து உங்கள் மூலத்திற்கான அடுத்தடுத்த கோரிக்கைகளில், அது நினைவக மதிப்புடன் ஒரு `Device-Memory` ஹெடரைச் சேர்க்கும்.
4. எடுத்துக்காட்டு கோரிக்கை ஹெடர்: `Device-Memory: 8`

சர்வரில் இந்தத் தகவலுடன், நீங்கள் பதிலின் ஒரு பைட்டைக் கூட அனுப்புவதற்கு முன்பு முடிவுகளை எடுக்கலாம். நீங்கள் ஒரு எளிமையான HTML ஆவணத்தை ரெண்டர் செய்யலாம், சிறிய CSS/JS பண்டில்களுடன் இணைக்கலாம், அல்லது குறைந்த-தெளிவுத்திறன் பட URL-களை நேரடியாக HTML-ல் உட்பொதிக்கலாம். குறைந்த திறன் கொண்ட சாதனங்களுக்கு ஆரம்பப் பக்க ஏற்றத்தை மேம்படுத்துவதற்கான மிகவும் பயனுள்ள வழி இதுவாகும்.

3. உங்கள் செயல்பாட்டை எவ்வாறு சோதிப்பது

உங்கள் நினைவகம் சார்ந்த அம்சங்களைச் சோதிக்க பல்வேறு இயற்பியல் சாதனங்களின் தொகுப்பு உங்களுக்குத் தேவையில்லை. குரோம் டெவ்டூல்ஸ் இந்த மதிப்புகளை மீற உங்களை அனுமதிக்கிறது.

• டெவ்டூல்ஸைத் திறக்கவும் (F12 அல்லது Ctrl+Shift+I).
• கட்டளை மெனுவைத் திறக்கவும் (Ctrl+Shift+P).
• "Show Sensors" என்று தட்டச்சு செய்து Enter ஐ அழுத்தவும்.
• சென்சார்கள் தாவலில், நீங்கள் பல்வேறு கிளையன்ட் ஹிண்ட்ஸ்களைப் பின்பற்ற ஒரு பகுதியைக் காணலாம், இருப்பினும் சாதன நினைவக ஏபிஐயை நேரடியாக சோதிப்பது அல்லது கிளையன்ட் ஹிண்ட் ஹெடரைப் பதிவு செய்யும் சர்வர் மூலம் சோதிப்பது சிறந்தது. நேரடி கிளையன்ட்-பக்க சோதனைக்கு, முழுமையான கட்டுப்பாட்டிற்கு உலாவி வெளியீட்டு கொடிகளைப் பயன்படுத்த வேண்டியிருக்கலாம் அல்லது ஒரு முழுமையான சோதனைக்கு சாதன எமுலேஷனை நம்பியிருக்கலாம். பலருக்கு ஒரு எளிதான வழி, உள்ளூரில் உருவாக்கும்போது உங்கள் சர்வரால் பெறப்பட்ட `Device-Memory` ஹெடர் மதிப்பைச் சரிபார்ப்பது.

முடிவுரை: பச்சாதாபத்துடன் உருவாக்குங்கள்

முகப்பு சாதன நினைவக ஏபிஐ என்பது ஒரு தொழில்நுட்ப கருவியை விட மேலானது; இது மேலும் பச்சாதாபமான, அனைத்தையும் உள்ளடக்கிய, மற்றும் செயல்திறன் மிக்க வலைப் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு வாகனம். நமது உலகளாவிய பார்வையாளர்களின் வன்பொருள் வரம்புகளை ஏற்றுக்கொண்டு மதிப்பதன் மூலம், நாம் அனைவருக்கும் பொருந்தும் ஒரே அளவு என்ற மனப்பான்மையைத் தாண்டிச் செல்கிறோம். அவை ஒரு உயர்தர கணினியில் அணுகப்பட்டாலும் அல்லது ஒரு நுழைவு-நிலை ஸ்மார்ட்போனில் அணுகப்பட்டாலும், செயல்பாட்டுடன் மட்டுமல்லாமல் மகிழ்ச்சிகரமான அனுபவங்களையும் நம்மால் வழங்க முடியும்.

சிறியதாகத் தொடங்குங்கள். உங்கள் பயன்பாட்டின் அதிக நினைவகத்தைப் பயன்படுத்தும் பகுதியைக் கண்டறியவும் - அது ஒரு பெரிய படமாகவோ, ஒரு கனமான நூலகமாகவோ, அல்லது ஒரு சிக்கலான அனிமேஷனாகவோ இருக்கலாம். `navigator.deviceMemory`-ஐப் பயன்படுத்தி ஒரு எளிய சரிபார்ப்பைச் செயல்படுத்தவும். தாக்கத்தை அளவிடவும். இந்த அதிகரிக்கும் படிகளை எடுப்பதன் மூலம், நீங்கள் அனைவருக்கும் ஒரு வேகமான, மேலும் நெகிழ்திறன் கொண்ட, மற்றும் மேலும் வரவேற்கத்தக்க வலையை உருவாக்க முடியும்.